<template>
  <yu-popup ref="yupopup" :title="isPopupTitle">
    <div class="type h-10 flex items-center justify-center text-xl mb-2 yu-textColor-hover cursor-pointer"
         @click="editRepeatType" v-if="isShareType">
      <span class="inline-block i-mdi-repeat mr-2 "></span>
      <span v-if="repeatType">分享给大家</span>
      <span v-else>分享给好友</span>
    </div>

    <div class="mb-2">
      <van-cell-group inset>
        <van-field
            v-model="shareMessage"
            rows="1"
            type="textarea"
            maxlength="140"
            placeholder="说点什么吧"
            show-word-limit
        />
        <div class="text-black h-8 flex items-center p-2" v-if="isShareSong && sharePlayerInfo.shareType !== 'text'" >
          <span class="yu-titleColor">{{ sharePlayerInfo?.type }}：</span>
          <span class="yu-titleColor">{{ sharePlayerInfo?.name }}</span>
        </div>
      </van-cell-group>
    </div>
    <div v-show="repeatType" class="text-black bg-white mr-4 ml-4 rounded-xl h-30 overflow-scroll p-2">
      <van-checkbox-group v-model="checkedFan">
        <van-cell-group>
          <van-cell
              v-for="(item, index) in store.fan"
              clickable

              :key="item.useId"
              :title="item.nickname"
              @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                  :name="item.userId"
                  :ref="el => checkboxRefs[index] = el"
                  @click.stop
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="action w-full mt-10  flex justify-around">
      <YuButton :loading="shareLoading" @click="confirmShare">{{ isPopupTitle }}</YuButton>
      <YuButton @click="closePopup">取消</YuButton>
    </div>
  </yu-popup>
</template>

<script setup>
import {reactive, ref, toRefs, watchEffect} from "vue"
import {useStore} from "@/store/index"

import YuButton from '@/components/YuButton/index.vue'
// 弹窗
import YuPopup from '@/components/YuPopup/index.vue'
import {asString} from "../../utils/index.js";

import {Notify} from "vant";

const store = useStore()

// 弹窗实例
const yupopup = ref(null)

const gather = reactive({
  shareMessage: '', // 分享输入的信息
  shareLoading: false, // 分享按钮loading
  repeatType: false, // 用来判断是分享给大家还是，分享给粉丝
  checkedFan: [], // 选中粉丝
  checkboxRefs: [] // 存储选中实例
})
const {shareMessage, shareLoading, repeatType, checkedFan, checkboxRefs} = toRefs(gather)
// 切换是分享大家还是分享粉丝
const editRepeatType = () => {
  gather.repeatType = !gather.repeatType
}
// 点击任意地方可以选中粉丝
const toggle = (index) => {
  gather.checkboxRefs[index].toggle()
}
// 点击，false分享到动态，true分享私信
const confirmShare = async () => {
  let params = {}
  if (!gather.repeatType) {
    if (props.isPopupTitle === '转发') {
      params = {...props.sharePlayerInfo, forwards: gather.shareMessage}
      gather.shareLoading = true
      await store.forwardingDynamicFn(params)
      gather.shareLoading = false
      yupopup.value.YuPopup = false
      gather.shareMessage = ''
      return;
    }
    // 分享的id是公共的可能是歌单的id可能是歌曲的id或者mv的id, msg分享歌单的话，type分享的是歌单歌曲还是mv等
    params = {
      id: props.sharePlayerInfo.publicId,
      msg: gather.shareMessage,
      type: props.sharePlayerInfo.shareType || 'playlist'
    }
    console.log(params)
    gather.shareLoading = true
    await store.getShareResource(params)
    gather.shareLoading = false
    // 分享成功之后关闭弹窗清空内容
    yupopup.value.YuPopup = false
    gather.shareMessage = ''
  } else {
    if (gather.checkedFan.length > 0) {
      gather.shareLoading = true
      // // 分享歌单私信 我的id, 用户user_ids多个id字符串分割, 歌单playlist msg携带信息 { user_ids: '', id: '', msg: '', playlist: '' }
      params = {
        user_ids: asString(gather.checkedFan),
        playlist: props.sharePlayerInfo.publicId || '',
        id: props.sharePlayerInfo.publicId || '',
        msg: gather.shareMessage
      }
      // 如果playlist为空就将这个参数删除歌单的参数
      params.playlist === '' ? delete params.playlist : ''
      // 如果id为空就将这个参数删除歌曲的参数
      params.id === '' ? delete params.id : ''
      // 第一个参数是分享的参数，第二个是用来判断是歌单还是歌曲还是mv或者其他的
      await store.sendPlaylist(params, props.sharePlayerInfo?.shareType || 'playlist')
      // 关闭loading
      gather.shareLoading = false
      // 分享成功之后关闭弹窗清空内容
      yupopup.value.YuPopup = false
      // 分享消息清空
      gather.shareMessage = ''
      // 选中粉丝清空
      gather.checkedFan = []
      // 粉丝实例清空
      gather.checkboxRefs = []
    } else {
      Notify({
        message: '请选择私信人',
        background: '#ffe1e1',
        color: '#ad0000'
      })
    }
  }
}
// 关闭弹窗
const closePopup = () => {
  yupopup.value.YuPopup = false
}
// 分享弹窗
const yuPopupA = () => {
  yupopup.value.YuPopup = true
}
// 导出让父组件调用
defineExpose({
  yuPopupA
})

const props = defineProps({
  sharePlayerInfo: {
    type: Object,
    default: {}
  },
  repeatType: {
    type: Boolean,
    default: false
  }, // 判断是分享给大家还是私信
  checkedFanA: {
    type: Array,
    default: []
  }, // 选中的粉丝Id
  isShareType: { // 是否隐藏头部分享类型
    type: Boolean,
    default: true
  },
  isShareSong: { // 是否隐藏分享内容下面的站位
    type: Boolean,
    default: true
  },
  isPopupTitle: { // 分享弹窗标题
    type: String,
    default: '分享'
  }
})
gather.repeatType = props.repeatType;

watchEffect(() => {
  gather.checkedFan = props.checkedFanA
  gather.shareMessage = props.sharePlayerInfo.forwards
})
</script>

<style scoped>

</style>
